<template>
  <div>
    <div class="div-content" style="">
      <div class="div-item" style="heigt: 100%">
        <div class="div-item-left">实际提现现金总额：</div>
        <div class="div-item-right">焕贝{{all}}</div>
      </div>
    </div>
    <Form ref="searchForm" @keydown.enter.native="Search" :model="searchForm" inline :label-width="60"
      class="search-form">
      <Form-item label="时间" prop="createDate">
        <DatePicker v-model="searchForm.createDate" @on-change="selectDateChange" type="month" format="yyyy-MM"
          clearable placeholder="选择时间" style="width: 200px">
        </DatePicker>
      </Form-item>
      <Form-item label="会员手机号" prop="mobile" :label-width="100">
        <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员手机号" clearable style="width: 160px" />
      </Form-item>
      <Form-item label="区域" prop="region">
        <region ref="region" style="width: 350px" @selected="selectedRegionSearch" />
      </Form-item>
      <Form-item label="审核状态" prop="applyStatus">
        <Select v-model="searchForm.applyStatus" placeholder="全部状态" clearable style="width: 160px">
          <Option value="APPLY">未审核</Option>
          <Option value="VIA_AUDITING">已通过未到账</Option>
          <Option value="FINISH">已到账完成</Option>
          <Option value="FAIL_AUDITING">已驳回</Option>
          <Option value="FAIL_AUDITING">取消</Option>
        </Select>
      </Form-item>
      <Button @click="Search" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      <Button @click="handleReset" type="primary" class="search-btn">重置</Button </Form>
    </Form>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
        @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
        show-sizer></Page>
    </Row>
    <Modal title="提现审核" v-model="roleModalVisible" :mask-closable="false" :width="500">
      <Form :label-width="80">
        <FormItem label="申请编号">
          <span>{{showList.sn}}</span>
        </FormItem>
        <FormItem label="用户名称">
          <span>{{showList.memberName}}</span>
        </FormItem>
        <FormItem label="申请金额">
          <span>{{showList.applyMoney | unitPrice}}</span>
        </FormItem>
        <FormItem label="提现状态">
          <span>未审核</span>
        </FormItem>
        <FormItem label="申请时间">
          <span>{{showList.createTime}}</span>
        </FormItem>
        <FormItem label="审核备注">
          <Input v-model="audit" />
        </FormItem>
      </Form>
      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
        <Button type="text" @click="submitRole('FAIL_AUDITING')">拒绝</Button>
        <Button type="primary" :loading="submitLoading" @click="submitRole('VIA_AUDITING')">通过
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    PlantWithdrawalSale
  } from "@/api/financial.js"
  import {
    withdrawApply
  } from "@/api/member";
  import region from "@/views/lili-components/region-every";
  export default {
    data() {
      return {
        all: 0,
        loading: false,
        total: 0,
        searchForm: {
          // 搜索框初始化对象
          owner: 'SALE',
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          selectDate: '',
          phone: '',
          applyStatus: ''
        },
        columns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "提现发起时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          }, {
            title: "流水号",
            key: "sn",
            minWidth: 240,
            tooltip: true,
          }, {
            title: "手机号",
            key: "mobile",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "用户昵称",
            key: "memberName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "区域",
            key: "region",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "身份类型",
            key: "partnerName",
            minWidth: 200,
            tooltip: true,
          },

          {
            title: "提现折扣",
            key: "fee",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "提现焕贝额",
            key: "applyPrice",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "提现现金额",
            key: "applyMoney",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "到账时间",
            key: "finishTime",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "收款账户",
            key: "cardNo",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "账户名",
            key: "accountName",
            minWidth: 200,
            tooltip: true,
          },
          
          {
            title: "银行",
            key: "bankName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "开户行",
            minWidth: 200,
            tooltip: true,
            render: (h, params) =>{
              return h('div', [
                 h('Span', params.row.adCodeName+params.row.openAccBank, '')
               ])
            }
          },
          {
            title: "电话",
            key: "bankMobile",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "状态",
            minWidth: 200,
            tooltip: true,
            render: (h, params) => {
              if (params.row.applyStatus === 'APPLY') {
                return h('div', [
                  h('Span', {}, '未审核')
                ])
              } else if (params.row.applyStatus === 'VIA_AUDITING') {
                return h('div', [
                  h('Span', {}, '已通过未到账 ')
                ])
              } else if (params.row.applyStatus === 'FINISH') {
                return h('div', [
                  h('Span', {}, '已到账完成 ')
                ])
              } else if (params.row.applyStatus === 'FAIL_AUDITING') {
                return h('div', [
                  h('Span', {}, '已驳回 ')
                ])
              } else if (params.row.applyStatus === 'CANCEL') {
                return h('div', [
                  h('Span', {}, '取消')
                ])
              }
            },
          },
          {
            title: "备注",
            key: "inspectRemark",
            minWidth: 200,
            tooltip: true,
          }
        ],
        data: [],
        showList: {}, // 可操作选项
        roleModalVisible: false, // 审核模态框
        audit: "", // 审核备注
      }
    },
    components: {
      region
    },
    created() {
      this.getDataList()
    },
    methods: {
      getDataList() {
        PlantWithdrawalSale(this.searchForm).then((res) => {
          this.loading = false;
          this.data = res.result.data.records;
          this.total = res.result.data.total;
          this.all = res.result.all
        })
      },
      // 跳转到扣率信息详情
      koulvDetail(row) {
        this.$router.push({
          name: "koulv-detail",
          query: {
            id: row.sn
          }
        })
      },
      selectDateChange(v) {
        console.log(v)
        this.searchForm.createDate = v
      },
      // 选中的地址
      selectedRegionSearch(val) {
        this.searchForm.region = val[1].join(',');
        this.searchForm.regionId = val[0].join(',');
      },
      Search() {
        this.loading = true
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      handleReset() {
        this.searchForm.pageNumber = 1 // 当前页数
        this.searchForm.pageSize = 10 // 页面大小
        this.searchForm.createDate = ''
        this.searchForm.mobile = ''
        this.$refs.region.addr = [];
        this.searchForm.applyStatus = ''
        this.getDataList();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = v;
        this.getDataList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .div-content {
    width: 100%;
    height: 100%;
    display: flex;

    .div-item {
      line-height: 35px;
      display: flex;
      float: left;
      margin-right: 36px;
      font-size: 16px;
      font-weight: 600;

      >.div-item-left {}

      >.div-item-right {
        flex: 1;
        word-break: break-all;
      }
    }
  }
</style>
